<template>
    <!-- 底部导航 -->
    <ul class="end">
        <li  v-for="(value,index) in nav">
            <router-link :class="{Color1:true,Color2:(value.path==current||current==value.href)}" :to="value.path" >
                <i :class="value.icon">
                    <span v-if="value.count!=''&&$store.state.list.length">{{$store.getters.getNum}}</span>
                </i>
                <span>{{value.name}}</span>
            </router-link>
        </li>
    </ul>
</template>
<style lang="less" scoped>
    /* 底部导航 */
    .end{
        width: 100%;
        height: 1.466rem;
        display: flex;
        background-color: #fff;
        border-top: 0.027rem solid #ccc;
        justify-content: space-around;
        position: fixed;
        bottom: -0.027rem;
        left: 0;
        z-index: 999;
    >li{
        display: flex;
        align-items: center;
    >a{
        display: flex;
        flex-flow: column;
        justify-content: space-evenly;
        align-items: center;
        text-decoration: none;
    >i{
        font-size: 0.613rem;
        position: relative;
        >span{
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 100%;
            top: -23%;
            padding: 8px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: red;
            color: #fff;
            font-size: 0.32rem;
            font-weight: bold;
        }
    }
    >span{
        font-size: 0.373rem;
    }
    }
    }
    }
    .Color1{
        color: #707070;
    }
    .Color2{
        color: #00CC99;
    }
</style>
<script>
    export default {
        name: 'Header',
        data(){
            return{
                //  底部导航
                nav:"",
                current:'/'
            }
        },
        mounted(){
            this.$axios.get('http://118.178.85.166:3000/index').then((data)=>{
                //  全部数据
                let Data=data.data[0];
                //  顶部导航
                this.nav=JSON.parse(Data.nav);
            }).catch((err)=>{
                console.log('这是footer.vue中的错误:'+err);
            });
            this.current=this.$route.path
        },
    }
</script>